---
title: Using Saas in Remix
description: A guide for installing Saas UI with Remix projects
---

> **React Router v7** is now recommended instead of Remix.

## Templates

Use the remix template below to get started quickly.

:::card-group

<ResourceCard
  type="github"
  title="Remix template"
  url="https://github.com/saas-js/saas-ui/tree/main/examples/remix-ts"
/>

:::

## Installation

:::steps

### Install dependencies

```bash
npm i @saas-ui/react@next @chakra-ui/react @emotion/react next-themes
```

### Setup emotion cache

Using snippets from the Remix sandbox, you can add the emotion cache to your
application.

[Emotion cache snippet](https://github.com/saas-js/saas-ui/blob/main/examples/remix-ts/app/emotion)

### Setup root

Wrap your application with the `Provider` component at the root of your
application.

This provider composes the following:

- `SaasProvider` from `@chakra-ui/react` for the styling system
- `ThemeProvider` from `next-themes` for color mode

```tsx title="app/root.tsx"
import React from "react"
import ReactDOM from "react-dom/client"
import App from "./App"
import { SuiProvider, defaultSystem } from "@saas-ui/react"
import { ThemeProvider } from "next-themes"

export default function App() {
  return (
    <SuiProvider value={defaultSystem}>
      <ThemeProvider attribute="class" disableTransitionOnChange>
        <Outlet />
      </ThemeProvider>
    </SuiProvider>
  )
}
```

### Update tsconfig

If you're using TypeScript, you need to update the `compilerOptions` in the
tsconfig file to include the following options:

```json title="tsconfig.json"
{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "skipLibCheck": true
  }
}
```

### Enjoy!

When the power of the snippets and the primitive components from Saas UI, you
can build your UI faster.

```tsx
import { HStack } from '@saas-ui/react'
import { Button } from '@saas-ui/react'

const Demo = () => {
  return (
    <HStack>
      <Button>Click me</Button>
      <Button>Click me</Button>
    </HStack>
  )
}
```

:::

## Known issues

You may encounter the following issues when using Saas UI with Remix:

```bash
Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
```

This is a known issue related to extension installed in your browser. We
recommend testing your application in incognito mode to see if the issue
persists.

> We welcome contributions to fix this issue.
